﻿
@{
    ViewBag.Title = "订单管理";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div id="app">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">后台管理</strong> / <small>@ViewBag.Title</small></div>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-form-group">
                <label>订单号：</label>
                <input type="text" class="am-input-sm" v-model="sn" />
            </div>
        </div>
        @*<div class="am-u-sm-12 am-u-md-3">
                <div class="am-form-group">
                    <label>下单手机：</label>
                    <input type="text" class="am-input-sm" v-model="mobile"/>
                </div>
            </div>*@
        <div class="am-u-sm-12 am-u-md-2">
            <div class="am-form-group">
                <label>状态：</label>
                <select v-model="status">
                    <option value="">全部</option>
                    <option value="0">已下单</option>
                    <option value="1">已兑换</option>
                    <option value="2">已发货</option>
                    @*<option value="3">已完成</option>
                        <option value="4">已取消</option>*@
                </select>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-12">
            <button class="am-btn am-btn-primary" v-on:click="search">查询</button>
            @*<a href="/admin/export/orderlist" target="_blank" class="am-btn am-btn-primary">导出订单Excel</a>
                <a href="/admin/export/ordersdplist" target="_blank" class="am-btn am-btn-primary">导出分销订单Excel</a>*@
        </div>
        <div class="am-g">
            <div class="am-u-sm-12">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                        <tr>
                            <th>订单ID</th>
                            <th>订单号</th>
                            <th>下单人</th>
                            <th>下单手机</th>
                            <th>兑换时间</th>
                            <th>兑换积分</th>
                            @*<th>运费金额</th>*@
                            @*<th>商品重量</th>*@
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="order in orders">
                            <td>{{order.Id}}</td>
                            <td>{{order.SerialNo}}</td>
                            <td>{{order.ConsumerName}}</td>
                            <td>{{order.ConsumerMobile}}</td>
                            <td>{{order.OrderTime}}</td>
                            <td>{{order.Amount}}</td>
                            @*<td>{{order.PostFee}}</td>*@
                            @*<td>{{order.Weight}}</td>*@
                            <td>
                                <span v-if="order.Status == 0">已下单</span>
                                <span v-if="order.Status == 1">已兑换</span>
                                <span v-if="order.Status == 2">已发货</span>
                                @*<span v-if="order.Status == 3">已完成</span>*@
                                @*<span v-if="order.Status == 4">已取消</span>*@
                            </td>
                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <a href="~/admin/ShopOrderList/detail/{{order.Id}}" class="am-btn am-btn-primary am-btn-xs am-hide-sm-only"><span class="am-icon-edit"></span> 修改</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="am-cf">
                    &nbsp;&nbsp;共 {{totalCount}} 条记录, 每页 {{pageCount}} 条记录
                    <div class="am-fr">
                        <ul class="am-pagination">
                            <li style="width: 60px">
                                <input class="am-form-field" style="text-align:center" type="text" v-model="gotoPage">
                            </li>
                            <li><a href="#" v-on:click="goto">GoTo &raquo;</a></li>
                            <li><a href="#" v-on:click="prev">&laquo; Prev</a></li>
                            <li><span>{{currentPage}}/{{totalPage}}</span></li>
                            <li><a href="#" v-on:click="next">Next &raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@*<div id="app">

    <iframe style="width:1000px; height:800px;" src="http://www.qianjing-china.com/QianJing/Admin/order?page=1&count=10"></iframe>

</div>*@
@section Scripts{
    <script>
         
        $('.admin-sidebar-ShopOrderList').addClass('current');

        var model = new Vue({
            el: '#app',
            data: {
                totalCount: @ViewBag.TotalCount,
                currentPage: @ViewBag.CurrentPage,
                pageCount: @ViewBag.PageCount,
                gotoPage: @ViewBag.CurrentPage,
                totalPage: @ViewBag.TotalPage,
                orders: @Html.Raw(ViewBag.Orders),
                mobile: '@ViewBag.Mobile',
                sn:'@ViewBag.SN',
                status:'@ViewBag.Status'
            },
            methods: {
                prev: function() {
                    var self = this;
                    if (self.currentPage <= 1)
                        return;

                    self.currentPage -= 1;
                    self.load();
                },
                next: function() {
                    var self = this;

                    if (self.currentPage >= self.totalPage)
                        return;

                    self.currentPage += 1;

                    self.load();
                },
                goto: function() {
                    var self = this;
                    self.currentPage = self.gotoPage;
                    self.load();
                },
                search: function() {
                    var self = this;
                    self.currentPage = 1;
                    self.load();
                },
                load: function() {
                    var self = this;
                    window.location.href = "ShopOrderList?page=" + self.currentPage + "&count=" + self.pageCount + "&sn=" + self.sn + "&mobile=" + self.mobile + "&status=" + self.status;
                }

            }
        });

</script>
}